:root {
  --vue-color: rgb(66, 185, 131);
  --red: rgb(135, 29, 29);

}
html {
  font-family: sans-serif;
  padding: 0;
}

body {
  padding: 0;
  margin: 0;
}
.controls {
  list-style-type: none;
  display: block;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}
.controls--item {
  display: inline-block;
  padding: 3px;
}
.controls--link {
  text-decoration: none;
  display: block;
  border-radius: 5px;
  padding: 5px;
  color: var(--vue-color);
  background-color: white;
  border: 2px solid var(--vue-color);
}
.controls--link:hover {
  color: white;
  background-color: var(--vue-color);
    border: 2px solid var(--vue-color);
}
.controls--link-active {
  color: white;
  background-color: var(--vue-color);
    border: 2px solid var(--vue-color);
}

.wrapper {
  display: flex;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1.5s;
}
.fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.fade-group-leave-to {
  opacity: 0;
}
.fade-group-leave-to {
  position: absolute;
}
.fade-group-move {
  transition: transform 1.5s;
}
